<template>
  <div>
    <Header></Header>
    <div class="header-placeholder"></div>
    <div style="height: 60px;
    width: 100%;
    margin: 40px 0;
    text-align: center;">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="选择影片场次"></el-step>
        <el-step title="选择座位"></el-step>
        <el-step title="确认订单"></el-step>
        <el-step title="完成付款"></el-step>
        <el-step title="影院取票观影"></el-step>
      </el-steps>
    </div>
    <!-- <Tip v-if="Overtime" :mId="plan.mId"/> -->
    <div class="container" v-if="active === 1"><seatsVue></seatsVue></div>
    <div class="container" v-if="active === 2"><confirmVue></confirmVue></div>
    <div class="container" v-if="active === 3"><payVue></payVue></div>
  </div>
</template>

<script>
import seatsVue from './seats.vue'
import Header from '@/components/Header'
import confirmVue from './confirm.vue'
import payVue from '@/components/Pay'
import Tip from '@/components/Tip'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
export default {
  name: 'TtmsIndex',

  data () {
    return {
      active: 1
    }
  },
  computed: {
    ...mapState('ticket', ['plan']),
    Overtime () {
      // 当前时间是否在演出计划开始前15分钟
      console.log(this.plan)
      const time = dayjs(this.plan.pStarttime).diff(dayjs(new Date()), 'minute')
      console.log(time)
      return time < 15
    }
  },
  components: {
    seatsVue,
    Header,
    confirmVue,
    payVue,
    Tip
  },
  mounted () {
    this.$bus.$on('lock', (selectedList) => {
      if (selectedList.length === 0) {
        this.active = 1
      } else {
        this.active = 2
      }
    })
    this.$bus.$on('unLockeTicket', (flag) => {
      if (flag) {
        this.active = 1
      }
    })
    this.$bus.$on('setOrder', (flag) => {
      if (flag) {
        this.active = 3
      }
    })
  },
  beforeDestroy () {
    this.$bus.$off('lock')
    this.$bus.$off('unLockeTicket')
    this.$bus.$off('setOrder')
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.header-placeholder {
    height: 20px;
}
.container {
    margin: 0 auto;
    width: 1300px;
}
</style>
